<template>
	<view>
		<!--提示-->
		<view class="tishi">
			<text>请填写正确的信息,否则订单无法发出</text>
		</view>
		<!--收货人-->
		<view class="detail">
			<view>
				<text class="icon">&#xebf5; 姓名 :</text>
			</view>
			<input class="shurukuang" v-model="name" type="text" maxlength="10" placeholder-style="font-size:28rpx" placeholder="请输入姓名" />
		</view>
		
		<!--电话-->
		<view class="detail">
			<view>
				<text class="icon">&#xe65f; 联系电话 :</text>
			</view>
			<input class="shurukuang" v-model="tel" type="number" maxlength="11" placeholder-style="font-size:28rpx" placeholder="请输入联系电话" />
		</view>
		<!--区域选择-->
		<view class="address">
			<view class="quyuleft">
				<text class="icon">&#xe8ae; 区域 :</text>
			</view>
			<view class="quyuright"  @click="addressShow = true">
				<text>{{address}}</text>
			</view>
		</view>
		
		<!--地址-->
		<view class="detail">
			<view>
				<text class="icon">&#xe8ff; 详细地址 :</text>
			</view>
			<input v-model="addressDe" class="shurukuang" type="text" maxlength="20" placeholder-style="font-size:28rpx" placeholder="请输入详细地址" />
		</view>
		<!--是否默认-->
		<view class="detail">
			<view>
				<text class="icon">&#xec58; 是否默认 :</text>
			</view>
			<radio-group  @change="danxuan" >
				<text class="danxuan">是</text><radio  value="0" color="rgb(148,102,102)"></radio>
				<text class="danxuan">否</text><radio value="1" color="rgb(148,102,102)"></radio>
			</radio-group>
		</view>
		
		<!--提交-->
		<view class="tijiao" @click="queding">
			<text>确定</text>
		</view>
		<!--三级联动地址选择器,只能放在最外部-->
		<pickerAddress v-model="addressShow" @confirm="addresspick" />
	</view>
</template>

<script>
	import pickerAddress from '@/liucomponents/liudx-pickerAddress/index.vue'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				//区域
				address:'点击选择',
				addressShow:false,
				form: {
					province: '',
					city: '',
					area: '',
				},
				//姓名
				name:'',
				//电话
				tel:'',
				//具体地址
				addressDe:'',
				//最后地址,等于区域加上具体地址
				lastAddress:'',
				//是否默认
				moRen:null,
				//用户
				user:{
					
				}
			}
		},
		onLoad() {
			//获取用户信息
			const value=uni.getStorageSync("user");
			this.user=value;
		}
		,
		methods: {
			addresspick(obj) {
				let arr = [ 'province', 'city', 'area'];
				let place = '';
				arr.map(key => {
					this.form[key] = obj[key].AreaId
					place += obj[key].AreaName
				})
				this.address = place
				console.log(this.address);
			},
			//单选框选择时复制
			danxuan(e){
				this.moRen=e.detail.value;
			},
			queding(){
				if(this.name.length<1){
					uni.showToast({
						title:"请输入姓名"
					})
					return;
				}
				if(this.tel.length!=11){
					uni.showToast({
						title:"请输入11位手机号码"
					})
					return;
				}
				if(this.address=='点击选择'){
					uni.showToast({
						title:"请选择区域"
					})
					return;
				}
				if(this.addressDe.length<1){
					uni.showToast({
						title:"请输入具体地址"
					})
					return;
				}
				if(this.moRen==null){
					uni.showToast({
						title:"请选择此收货地址是否为默认收货地址"
					})
					return;
				}
				//发送请求
				uni.request({
					url:this.webUrl+"addUserNewAddress",
					data:{
						'userId':this.user.userId,
						'name':this.name,
						'address':this.address+this.addressDe,
						'tel':this.tel,
						'ifMoRen':this.moRen
					},
					success: (res) => {
						if(res.data.code=="200"){
							uni.showToast({
								title:"添加地址成功"
							})
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},1500)
						}
					}
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	.tishi{
		float: left;
		width: 100%;
		height: 70rpx;
		background-color: white;
		font-size:29rpx ;
		text-align: center;
		line-height: 70rpx;
		color: rgb(148,102,102);
	}
	.detail{
		float: left;
		width: 100%;
		height: 100rpx;
		background-color: white;
		margin-top: 10rpx;
		line-height: 100rpx;
		view{
			float: left;
			width: 30%;
			height: 100rpx;
			text{
				color: rgb(148,102,102);
				margin-left: 30rpx;
				font-size: 28rpx;
			}
		}
	}
	.shurukuang{
		width: 70%;
		height: 100rpx;
		float: left;
		font-size: 28rpx;
	}
	.tijiao{
		float: left;
		width: 74%;
		height: 80rpx;
		background-color: rgb(148,102,102);
		margin-left: 13%;
		margin-top: 50rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 15rpx;
		text{
			font-size: 28rpx;
			color: white;
		}
		
	}
	.danxuan{
		font-size: 28rpx;
	}
	
	
	.address{
		float: left;
		width: 100%;
		height: 100rpx;
		background-color: white;
		margin-top: 10rpx;
		line-height: 100rpx;
		.quyuleft{
			float: left;
			width: 30%;
			height: 100rpx;
			text{
				color: rgb(148,102,102);
				margin-left: 30rpx;
				font-size: 28rpx;
			}
		}
		.quyuright{
			float: left;
			width: 70%;
			height: 100rpx;
			line-height: 100rpx;
			text{
				font-size: 28rpx;
				color: rgb(148,102,102);
			}
		}
	}
</style>
